<!-- 上传照片 -->
<template>
	<view class="container">
		<view class="content">
			<text class="title">上传照片</text>
			<view class="list">
				<view class="upload-item">
					<view class="pic-box" v-for="item in filePaths" :key="item.id">
						<image class="pic" :src="item.path" mode="aspectFill">
						</image>
						<button @click="handleRemovePic(item.id)" class="close-btn iconfont">&#xe603;</button>
					</view>
					<!-- 选择图片按钮 -->
					<button @click="handleChooseImage()"
						class="upload-btn iconfont btn-transition-scale95">&#xe617;</button>
				</view>
				<view class="remark-item">
					<textarea class="text-area" v-model="formData.remark" auto-height placeholder-style="color:#999;"
						placeholder="请输入备注说明" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import api from '@/api/index.js';
	import { ref, watchEffect } from 'vue';
	import { storeToRefs } from 'pinia';
	import { usePostNeedStore } from '../store.js';

	const store = usePostNeedStore();
	const { formData, detail } = storeToRefs(store);
	const filePaths = ref([]);

	watchEffect(() => {
		if (detail.value) {
			const photoIds = detail.value.photo.split(',');
			const photoPaths = detail.value.photo_list;
			photoIds.forEach((id, index) => {
				filePaths.value.push({
					id,
					path: photoPaths[index]
				});
			});
		}
	});

	// 选择图片上传
	const handleChooseImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['camera', 'album'], //从相册选择
			success: async (res) => {
				uni.showLoading({ title: '上传中...' });
				const result = await api.c_need_api.upload({
					filePath: res.tempFilePaths[0],
				}).finally(() => setTimeout(uni.hideLoading, 100));

				filePaths.value.push(result.data.data);
				store.SET_FORM_DATA('photo', filePaths.value.map(item => item.id).join());
			}
		})
	}

	// 移除图片
	const handleRemovePic = (id) => {
		const index = filePaths.value.findIndex(item => item.id === id);
		filePaths.value.splice(index, 1);
		formData.value.photo = filePaths.value.map(item => item.id).join();
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 40rpx 25rpx 0;

		.content {
			.title {
				font-weight: bold;
				font-size: 30rpx;
				color: #222222;
				line-height: 1.5;
			}
		}
	}

	.list {
		background-color: white;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding-left: 30rpx;

		.upload-item {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 38rpx;
			margin-left: -30rpx;
			overflow: hidden;

			.pic-box {
				position: relative;
				width: 136rpx;
				height: 136rpx;
				margin-top: 25rpx;
				margin-left: 30rpx;

				.pic {
					width: inherit;
					height: inherit;
					border-radius: 10rpx;
				}

				.close-btn {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					font-size: 40rpx;
					color: #D9D9D9;
					border-radius: 50%;
					background: radial-gradient(#999999 50%, transparent 50%);
				}
			}


			.upload-btn {
				width: 136rpx;
				height: 136rpx;
				font-size: 60rpx;
				color: #60646F;
				text-align: center;
				line-height: 136rpx;
				border-radius: 10rpx;
				background-color: #F5F4F5;
				margin-top: 25rpx;
				margin-left: 30rpx;
			}
		}

		.remark-item {
			padding: 25rpx 20rpx 40rpx 0;
			border-top: 1rpx solid #E5E5E5;

			.text-area {
				width: 100%;
				font-size: 30rpx;
				color: #222222;
				line-height: 1.5;
			}
		}
	}
</style>